<template>
    <div class="full-page">
        <div class="maker-detail-box" v-if="buildDetail"
            @click.stop="navToMP(`/pages/listDetail/listDetail?id=${buildDetail.id}&title=${buildDetail.title}`)">
            <img :src="buildDetail.logoUrl || defaultImg" alt="" class="cover">
            <div class="right-box">
                <div class="name">
                    {{ buildDetail.title }}
                    <span class="distance">{{ mToKm(buildDetail.juli) }}</span>
                </div>
                <div class="tags" v-if="buildDetail.lables">
                    <div class="tag" v-for="i in buildDetail.lables.split(' ')" :key="i">{{ i }}</div>
                </div>
                <div class="address">
                    <span>{{ buildDetail.address }}</span>
                    <div class="nav-btn" @click.stop="navgationToBuild(buildDetail)" v-if="buildDetail.positioningLat">
                        <img class="nav-btn-icon" src="@/assets/images/navgation_btn_icon.png" alt="">
                        导航
                    </div>
                </div>
            </div>
        </div>

        <div class="map-wraper">
            <div id="map"></div>
            <div class="location-btn" @click="setLocationCenter"><img src="@/assets/images/location_btn.png"></div>
            <div class="list-btn" @click="navToMP('/pages/list/list')"><img src="@/assets/images/more_btn.png">查看列表</div>
            <!-- <div class="game-btn" @click="navToMP('/pages/code/code')"><img src="@/assets/images/xl_fixed_btn.png"></div> -->
            <div class="game-btn-other gbo1" @click="wait"><img src="@/assets/images/fg_fixed_btn.png"></div>
            <div class="game-btn-other gbo2" @click="wait"><img src="@/assets/images/xs_fixed_btn.png"></div>
            <div class="game-btn-other gbo3" @click="wait"><img src="@/assets/images/ty_fixed_btn.png"></div>

        </div>

        <div class="btns-popup">
            <!-- <div class="drag-btn"></div> -->
            <swiper-container :slides-per-view="5" class="radius16">
                <swiper-slide>
                    <div class="btn" @click="_getBusinessList">
                        <img v-show="btnActive != 1" src="@/assets/images/tj_btn.png">
                        <img v-show="btnActive == 1" src="@/assets/images/tj_btn_active.png">
                        推荐
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="btn" @click="btnClick(10, 2)">
                        <img v-show="btnActive != 2" src="@/assets/images/yc_btn.png">
                        <img v-show="btnActive == 2" src="@/assets/images/yc_btn_active.png">
                        演出
                    </div>
                </swiper-slide>
                <!-- <swiper-slide>
                    <div class="btn" @click="routeBtnClick(1, 3)">
                        <img v-show="btnActive != 3" src="@/assets/images/hc_btn.png">
                        <img v-show="btnActive == 3" src="@/assets/images/hc_btn_active.png">
                        好吃
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="btn" @click="routeBtnClick(2, 4)">
                        <img v-show="btnActive != 4" src="@/assets/images/hs_btn.png">
                        <img v-show="btnActive == 4" src="@/assets/images/hs_btn_active.png">
                        好耍
                    </div>
                </swiper-slide> -->
                <swiper-slide>
                    <div class="btn" @click="btnClick(1, 5)">
                        <img v-show="btnActive != 5" src="@/assets/images/jd_btn.png">
                        <img v-show="btnActive == 5" src="@/assets/images/jd_btn_active.png">
                        景点
                    </div>
                </swiper-slide>

                <swiper-slide>
                    <div class="btn" @click="btnClick(6, 6)">
                        <img v-show="btnActive != 6" src="@/assets/images/wsj_btn.png">
                        <img v-show="btnActive == 6" src="@/assets/images/wsj_btn_active.png">
                        卫生间
                    </div>
                </swiper-slide>

                <swiper-slide>
                    <div class="btn" @click="btnClick(7, 7)">
                        <img v-show="btnActive != 7" src="@/assets/images/tcc_btn.png">
                        <img v-show="btnActive == 7" src="@/assets/images/tcc_btn_active.png">
                        停车场
                    </div>
                </swiper-slide>

                <swiper-slide>
                    <div class="btn" @click="navToMP('/pages/announcement/announcement')">
                        <img src="@/assets/images/gg_btn.png">
                        公告
                    </div>
                </swiper-slide>

                <swiper-slide>
                    <div class="btn" @click="navToMP('/pages/service/service')">
                        <img src="@/assets/images/dqfw_btn.png">
                        党群服务
                    </div>
                </swiper-slide>

                <swiper-slide>
                    <div class="btn" @click="navToMP('/pages/my/my')">
                        <img src="@/assets/images/wd_btn.png">
                        我的
                    </div>
                </swiper-slide>
            </swiper-container>
            <div class="path-list" v-if="routeList.length">
                <div class="path-item-wrap" v-for="i in routeList" :key="i.id" :id="'routeId_' + i.id"
                    @click="routeItemClick(i.id)">
                    <div class="path-item">
                        <img src="@/assets/images/path_icon.png" alt="" class="icon">
                        {{ i.name }}
                    </div>
                </div>
            </div>
        </div>

        <div class="toast-wraper toast-wraper-ani" v-if="toastShow">
            <div class="toast">
                {{ toastText }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue';
import { getBuildingDetail, getBuildingList, getRouteList, getRouteDetail, getBusinessList } from '@/api/index';
// import useMap from '@/hooks/useMap';
import useLeafLetMap from '@/hooks/useLeafLetMap';
// import useMainWS from '@/hooks/useMainWS';
import { mToKm } from '@/helper';
import { useRoute } from 'vue-router';
import defaultImg from '@/assets/images/default-img.png';

import { register } from 'swiper/element/bundle';
register();

const { addMapEventListener, setLocationCenter, init, addMaker, addPolyline, PointTransformation, getLocation, map, toastShow, toastText } = useLeafLetMap({
    mapId: 'map'
});

const btnActive = ref(0);

const _getBuildingDetail = async (id) => {
    try {
        let location = null;
        try {
            location = await getLocation();
        } catch (error) {
        }
        console.log('5: ', location, Date.now());
        let params = {
            id,
        }
        if (location) {
            params.positioningLat = location?.latlng.lat
            params.positioningLng = location?.latlng.lng
        }
        buildDetail.value = await getBuildingDetail(params);
        addMapEventListener('click', () => {
            buildDetail.value = null;
        })
        console.log(map);


    } catch (error) {

    }
}

const _getBusinessList = async () => {
    let res = await getBusinessList({
        id: 1,
    });
    addMaker(res.hlxActivityBusinessVOList.map(item => {
        return {
            ...item,
        }
    }), 'xl', async (data) => {
        _getBuildingDetail(data.businessId);
    });
    btnActive.value = 1;
}

onMounted(() => {
    _getBusinessList();
})


const buildDetail = ref(null);
const btnClick = async (type, active) => {
    // 1景点,2中餐,3茶饮,4小吃,5酒店,6公共厕所,7停车场,8游客中心,9医务室,10演出,11管理局。可以多选
    let res = await getBuildingList({
        types: type,
    });
    addMaker(res.map(item => {
        return {
            ...item
        }
    }), type, async (data) => {
        _getBuildingDetail(data.id);
    });
    btnActive.value = active
}
const route = useRoute();
const navgationToBuild = async (build) => {
    // const currenlatLng = await getLocation();
    // const clatLng = PointTransformation.gcj_encrypt(currenlatLng.latlng.lat, currenlatLng.latlng.lng);
    // const latlng = PointTransformation.gcj_encrypt(+build.positioningLat, +build.positioningLng);
    const query = JSON.stringify({
        type: 'navigation',
        params: {
            // latitude: latlng.lat,
            // longitude: latlng.lng,
            latitude: +build.positioningLat,
            longitude: +build.positioningLng,
            name: build.title,
            address: build.address,
        }
    })

    // wx.miniProgram.postMessage({
    //     data: {
    //         fn: 'navigation',
    //         params: {
    //             latitude: build.positioningLat, // 纬度，浮点数，范围为90 ~ -90
    //             longitude: build.positioningLng, // 经度，浮点数，范围为180 ~ -180。
    //             name: build.name, // 位置名
    //             address: build.address, // 地址详情说明
    //         }
    //     }
    // })

    navToMP('/pages/map/map?params=' + query);

    // if (route.query.id) {
    //     const ws = useMainWS(`wss://hlx.xiangle6.cn/imserver/${route.query.id}/webview`);

    //     ws.send({
    //         type: 'navigation',
    //         params: {
    //             latitude: latlng.lat,
    //             longitude: latlng.lng,
    //             name: build.title,
    //             address: build.address,
    //         }
    //     });
    // } else {
    //     var url = "https://uri.amap.com/navigation?from=" + clatLng.lng + "," + clatLng.lat + ",当前位置&to=" + latlng.lng + "," + latlng.lat + "," + build.address + "+&mode=walk&policy=0&src=" + encodeURIComponent(location.href) + "&coordinate=gaode&callnative=1";
    //     if (confirm("路线已规划完成，是否跳转到高德地图导航?")) {
    //         window.location.href = url;
    //     }
    // }

    // WeixinJSBridge.invoke('openLocation', {
    //     latitude: build.positioningLat, // 纬度，浮点数，范围为90 ~ -90
    //     longitude: build.positioningLng, // 经度，浮点数，范围为180 ~ -180。
    //     name: build.name, // 位置名
    //     address: build.address, // 地址详情说明
    // });
    // wx.miniProgram.postMessage({ data: {
    //     fn: 'openLocation',
    //     params: {
    //         latitude: build.positioningLat, // 纬度，浮点数，范围为90 ~ -90
    //         longitude: build.positioningLng, // 经度，浮点数，范围为180 ~ -180。
    //         name: build.name, // 位置名
    //         address: build.address, // 地址详情说明
    //     }
    // }})
    // wx.openLocation({
    //     latitude: build.positioningLat, // 纬度，浮点数，范围为90 ~ -90
    //     longitude: build.positioningLng, // 经度，浮点数，范围为180 ~ -180。
    //     name: build.name, // 位置名
    //     address: build.address, // 地址详情说明
    // })
}

const routeList = ref([]);
const routeBtnClick = async (id, active) => {
    routeItemClick(id)
    btnActive.value = active
    // try {
    //     routeList.value = await getRouteList({ types: type });
    //     if (routeList.value.length) {
    //         await nextTick();
    //         document.querySelector(`#routeId_${routeList.value[0].id}`).scrollIntoView({
    //             behavior: 'smooth'
    //         });
    //     }
    // } catch (error) {

    // }
}
const currentRoute = ref({});
const routeItemClick = async (id) => {
    try {
        currentRoute.value = await getRouteDetail({ id });
        addPolyline(currentRoute.value.hlxRouteDetailVOList.map(item => ({
            ...item,
            // point: [item.positioningLng, item.positioningLat]
        })), id, async (data) => {
            _getBuildingDetail(data.buildingId);
        });
    } catch (error) {

    }
}

const navToMP = (url) => {
    wx.miniProgram.navigateTo({ url: url })
}

const wait = () => {
    toastShow.value = true;
    toastText.value = '活动暂未开启';
}

onMounted(async () => {
    await nextTick();
    init();
})
</script>

<style scoped lang="less">
.toast-wraper {
    position: fixed;
    bottom: 0;
    left: 50%;
    padding: 0.12rem 0.18rem;
    font-size: 24px;
    transition: bottom 0.2s, opacity 0.3s;
    transform: translateX(-50%);
    color: #fff;
    border-radius: 0.1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.3);
    z-index: 501;
}

.toast-wraper-ani {
    bottom: 200px;
    opacity: 1;
}

.full-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.map-wraper {
    width: 100%;
    flex: 1;
    position: relative;

    img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .location-btn {
        height: 64px;
        width: 64px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        left: 10px;
        bottom: 50px + 16px;
        z-index: 500;
    }

    .list-btn {
        background-color: #fff;
        position: absolute;
        right: 10px;
        bottom: 50px + 16px;
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 32px;
        padding: 10px 18px;
        border-radius: 16px;
        z-index: 500;


        img {
            width: 22px;
            margin-right: 12px;
        }
    }

    .game-btn, .game-btn-other {
        position: absolute;
        right: 10px;
        bottom: 50px + 88px;
        width: 90px;
        height: 116px;
        z-index: 500;
    }
    .game-btn-other{
        width: 82px;
        height: 94px;
    }
    .gbo1{
        bottom: 50px + 88px + 12px;
    }
    .gbo2{
        bottom: 50px + 88px + 12px + 12px + 94px;
    }
    .gbo3{
        bottom: 50px + 88px + 12px + 12px + 12px + 94px + 94px;
    }

    :deep(.cus-marker) {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 24px;
            font-weight: 400;
            color: #333333;
            line-height: 44px;
            border: #B88400 solid 1px;
            padding: 0 10px;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, .8);
        }

        .icon {
            margin-top: 18px;
            width: 56px;
            height: 56px;
        }
    }

}

.maker-detail-box {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px;
    border-radius: 6px;
    padding: 16px 20px;
    box-sizing: border-box;
    z-index: 500;
    display: flex;

    .cover {
        width: 140px;
        height: 140px;
        border-radius: 16px;
        flex-shrink: 0;
    }

    .right-box {
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .name {
            display: flex;
            justify-content: space-between;
            font-size: 32px;
            font-weight: 500;
            color: #000000;
            line-height: 32px;

            .distance {
                font-size: 24px;
                font-weight: 400;
                color: #999999;
            }
        }

        .tags {
            display: flex;

            .tag {
                padding: 6px 14px;
                font-size: 20px;
                font-weight: 400;
                color: #999999;
                line-height: 28px;
                border-radius: 200px;
                background-color: #F4F4F4;
                margin-right: 16px;
            }
        }

        .address {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28px;
            font-weight: 400;
            color: #999999;
            line-height: 32px;

            .nav-btn {
                display: flex;
                align-items: center;
                padding: 6px 20px;
                font-size: 24px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 32px;
                border-radius: 100px;
                background-color: #006FF2;

                &-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                }
            }
        }
    }
}

#map {
    height: 100%;
    width: 100%;

    :deep(.anchorBL) {
        display: none;
    }
}

.btns-popup {
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    z-index: 500;
    padding: 20px 0;
    padding-bottom: calc(contain(safe-area-inset-bottom) + 20px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
    border-radius: 16px 16px 0px 0px;
    overflow: hidden;
    margin-top: -30px;

    .path-list {
        overflow: auto;
    }

    .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 400;
        color: #333333;
        line-height: 44px;

        img {
            margin-bottom: 10px;
            width: 90px;
            height: 88px;
        }
    }

    .path-list {
        padding: 32px 36px;

        .path-item-wrap {
            border-top: 2px solid #e8e8e8;
            padding: 8px 0;

            .path-item {
                display: flex;
                padding: 24px;
                align-items: center;
                background: #FFEDED;
                border-radius: 16px 16px 16px 16px;
                font-size: 28px;
                font-weight: 600;
                color: #000000;
                line-height: 32px;

                .icon {
                    width: 48px;
                    height: 48px;
                    margin-right: 52px;
                }
            }
        }

    }
}
</style>